<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-sacle=1.0">
    <title>CSS 布局练习</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
    <style>
        .row div {
            background-color: #ccc;
            border: 1px red solid;
        }
    </style>

</head>

<body>
    <header>
        <h1>Bootstrap练习</h1>

    </header>
    <main>
        <section>
            <h2> 容器</h2>
            <div class="container-fluid" style="background-color: cornflowerblue;">等丰富的非</div>
            <div class="container-md" style="background-color: cornflowerblue;">等丰富的非</div>
        </section>
        <section>
            <div class="section">
                <div class="container">
                    <div class="row">
                        <div class="col">1</div>
                        <div class="col">2</div>
                        <div class="col">3</div>
                        <div class="col">4</div>
                        <div class="col">5</div>
                        <div class="col">6</div>
                        <div class="col">7</div>
                        <div class="col">8</div>
                        <div class="col">9</div>
                        <div class="col">10</div>
                        <div class="col">11</div>
                        <div class="col">12</div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row my-3">
                    <div class="col-md-8">mjxsgwbd</div>
                    <div class="col-md-4">mjxsgwbd/div>
                    </div>
                </div>
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-md-8">mjxsgwbd</div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 offset-2">mjxsgwbd</div>
                    </div>
                </div>
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-md-8 ">
                            <div class="container">
                                <div class="row my-3">
                                    <div class="col-md-8 mr-3">mjxsgwbd</div>
                                    <div class="col-md-3">mjxsgwbd/div>
                                    </div>
                                </div>
                            </div>
        </section>
        <section>
            <h2>响应式图片</h2>
            <div class="container">
                <div class="row">
                    <div class="col-8"> <img
                            src="http://img.lemeitu.com/m00/75/13/2da9f1188ee20c65fa2b8c40f6f2d581__w.jpg"
                            alt="bing每日美图" class="img-fluid"></div>
                </div>
            </div>

        </section>
    </main>
    <footer></footer>
</body>

</html>